<template>
  <div
    id="deactive"
    class="wrap_common">
    <div class="list_wrap_body">
          <div class="list_total">共开展{{ list.total }}个活动</div>
            <template v-if="!$util.isEmpty(list.data)">
              <div
                class="list_wrap"
                v-for="(item, index) in list.data"
                :key="index">
                <div class="list_top">
                  <div class="list_top_left">
                    <img
                      :src="item.banner"
                      alt>
                  </div>
                  <div class="list_top_right">
                    <div class="list_title_text ellipsis_line_com">{{ item.title }}</div>
                    <div class="list_time">活动时间：{{ item.start_date }}~{{ item.end_date }}</div>
                    <div class="list_real_wrap">
                      <div>
                        <img
                          :src="`${constant.imgUrl}design/look.png`"
                          alt>
                        <span>{{ item.view_num }}</span>
                      </div>
                      <div>
                        <img
                          :src="`${constant.imgUrl}design/fabulous.png`"
                          alt>
                        <span>{{ item.share_num }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="list_bottom">
                  <span
                    :class="['list_btn',index == 0?'btn_disabled':'']"
                    @click="sortList('up', item.promotion_id, index)">
                    上移
                  </span>
                  <span
                    :class="['list_btn',index == list.data.length - 1?'btn_disabled':'']"
                    @click="sortList('down', item.promotion_id, index)">
                    下移
                  </span>
                  <span
                    class="list_btn"
                    @click="addOrEditBtn(item.promotion_id, item)">
                    编辑
                  </span>
                  <span
                    class="list_btn"
                    @click="delBtn(item.promotion_id, index)">删除</span>
                </div>
              </div>
            </template>
            <AppWrapperEmpty
               type="noData"
               :finished="list.finished"
                :is-loading="list.loading"
                title="无数据"
                :is-empty="$util.isEmpty(list.data)"
            />
    </div>
    <footer>
      <div class="add_active">
        <img
          :src="`${constant.imgUrl}center/icon_addcase.png`"
          alt>
        <span @click="addOrEditBtn('')">新增活动</span>
      </div>
    </footer>
  </div>
</template>

<script>
import { getlist, del, sortorder } from '@/api/promotion'
import { list } from '@/mixins'
import AppWrapperEmpty from '@/components/App_wrapper_empty'
export default {
	name: 'Deactive',
	mixins: [list],
	components: {
		AppWrapperEmpty
	},
	data() {
		return {
			constant: this.$constant,
			query: null
		}
	},
	onLoad(val) {
		this.query = val
	},
	onPullDownRefresh() {
		this.resetList()
		this.init().then(res => {
			uni.stopPullDownRefresh()
		})
	},
	onReachBottom() {
		if (this.list.data.length < this.list.total) {
			this.init().then(res => {
				uni.stopPullDownRefresh()
			})
		} else {
			uni.stopPullDownRefresh()
		}
	},
	mounted() {
		this.init()
	},
	methods: {
		init() {
			return getlist({
				page: this.list.page,
				limit: this.list.limit,
				owner_user_id: this.query.owner_user_id
			}).then((res) => {
				this.completes(res)
			})
		},
		sortList(type, id, index) {
			if (index == 0 && type == 'up') return
			if (index == this.list.data.length - 1 && type == 'down') return
			const nearIndex = type == 'up' ? index - 1 : index + 1
			const nearId = type == 'up' ? this.list.data[nearIndex].promotion_id : this.list.data[nearIndex].promotion_id
			const params = {
				owner_user_id: this.query.owner_user_id,
				this_id: id,
				near_id: nearId
			}
			sortorder(params).then((res) => {
				if (res.status === 'success') {
					this.resetList()
					this.init()
				} else {
					uni.showToast({
						title: res.errors.message,
						icon: 'none'
					})
				}
			})
		},
		delBtn(id, index) {
			const beforeClose = () => {
				const params = {
					owner_user_id: this.query.owner_user_id,
					promotion_id: id
				}
				del(params).then((res) => {
					if (res.status === 'success') {
						this.resetList()
						this.init()
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.errors.message,
							icon: 'none'
						})
					}
				})
			}
			uni.showModal({
				title: '提示',
				content: '你确定要删除吗?',
				success: beforeClose
			})
		},
		addOrEditBtn(id) {
			uni.navigateTo({
				url: `/pages/marketing/edit?owner_user_id=${this.query.owner_user_id}&promotion_id=${id}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
#deactive {
    .list_wrap_body {
        padding-bottom: 100px;
        .list_total {
            color: #999;
            margin: 20px 40px 20px;
        }
        .list_wrap {
            margin: 0 30px 20px;
            padding: 30px 10px;
            background-color: #fff;
            border-radius: 20px;
            box-shadow: 0 2px 10px #ededed;
            .list_top {
                display: flex;
                align-items: center;
                margin-bottom: 30px;
                .list_top_left {
                    width: 210px;
                    height: 152px;
                    margin: 0 30px 0 20px;
                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 10px;
                    }
                }
                .list_top_right {
                    width: calc(100% - 260px);
                    color: #999;
                    & > div {
                        margin: 10px 0;
                    }
                    .list_title_text {
                        color: #333;
                        font-size: 34px;
                    }
                    .list_real_wrap {
                        display: flex;
                        align-items: center;
                        & > div {
                            display: flex;
                            align-items: center;
                            margin-right: 16px;
                            img {
                                width: 36px;
                                height: 36px;
                                margin-right: 6px;
                            }
                        }
                    }
                }
            }
            .list_bottom {
                .list_btn {
                    display: inline-block;
                    width: calc(25% - 26px);
                    height: 60px;
                    line-height: 58px;
                    font-size: 30px;
                    margin: 0 10px;
                    border-radius: 40px;
                    border: 1px solid #999;
                    text-align: center;
                }
                .btn_disabled {
                  opacity: 0.5;
                }
                .span::before {
                    border-color: #999;
                }
            }
        }
    }
    .add_active {
        display: flex;
        align-items: center;
        justify-content: center;
        height:100%;
        color: #3a1b04;
        background-color: #ffd11a;
        font-size:24px;
        img {
            width: 29px;
            height:29px;
            margin-right: 10px;
        }
    }

    .van-pull-refresh {
        padding-bottom: 0;
    }
}
</style>
